<template>
    <div class="todo-main">
        <ul>
<!--            <MyItem v-for="todoObj of tableData"-->
<!--                    :key="todoObj.id"-->
<!--                    :todo="todoObj"-->
<!--                    :handle-check-table-data="handleCheckedTableData"-->
<!--                    :handle-delete-data="handleDeleteData"-->
<!--            ></MyItem>-->
            <transition-group appear
                        name="animate__animated animate__bounce"
                        enter-active-class="animate__lightSpeedInRight"
                        leave-active-class="animate__lightSpeedOutRight"
            >
                <MyItem v-for="todoObj of tableData"
                        :key="todoObj.id"
                        :todo="todoObj"
                ></MyItem>
            </transition-group>
        </ul>
    </div>
</template>

<script>
    import MyItem from './MyItem'

    export default {
        name: "MyList",
        components: {
            MyItem
        },
        // props: ['tableData', 'handleCheckedTableData', 'handleDeleteData']
        props: ['tableData']
    }
</script>

<style scoped>
    .todo-main {
        border: 1px solid #cccccc;
        border-radius: 2%;
        margin-top: 10px;
    }
</style>